<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>盒子阴影</title>
		<style>

			* {
				padding: 0;
				margin: 0;
			}

			div {
				width: 300px;
				height: 300px;
				/*background-color: black;*/
				margin: 200px auto 0;
				/* 
					第一个值: x轴方向的偏移量, 正值向右, 负值向左;
					第二个值: y轴方向的偏移量, 正值向下, 负值向上;
					第三个值: 模糊度;
					第四个值: 阴影半径;
					第五个值: 阴影颜色;
				 */
				/*box-shadow: 20px 20px 20px 10px red;*/
				
				/* 可以有多个阴影 */
				box-shadow: 0 0 0 20px red,
							0 0 0 40px orange,
							0 0 0 60px yellow,
							0 0 0 80px green,
							0 0 0 100px cyan,
							0 0 0 120px blue,
							0 0 0 140px purple;

			}

		</style>
	</head>
	<body>

		<div></div>
		
	</body>
</html>